Let's say that you're thinking of building a web app. You probably want a user-friendly, mobile-friendly experience. Then you should consider using single-page applications or SPAs to build a unique, speedy, and engaging experience for your users. You're probably using many SPAs every day. Think of your favorite social network or messaging app or the map application you use to find local businesses. The great user experience you get is driven by single-page applications. So, what exactly is an SPA? How does it work? How is it different from a traditional website? Let's first explore how traditional website works. Before the advent of modern JavaScript frameworks, most websites were implemented as multi-page applications. But this makes traditional applications resource intensive to web servers because sending entire web pages for every request consumes excessive bandwidth and uses CPU time to generate dynamic pages. If your website is complex, the site browsing experience may appear slow to users. It will be even slower if they have a poor or limited internet connection. To solve this problem, many web developers build their web applications as SPAs. It's called single-page, but that doesn't mean your website has only one page of content. What it means is that there is only one HTML page that gets sent from the server to the browser, but that page will update its content as your users interact with your website. A SPA allows the user to interact with the website without the application needing to download entire new web pages. Instead, it rewrites the current web page as the user interacts with it. The result is a browsing experience that feels faster and more responsive to user input. When the user navigates to the web application in the browser, the web server returns the necessary resources to run the application. A SPA has two approaches to serving code and resources. The first is called bundling, and the second approach is known as lazy loading or code splitting. With bundling, when the browser requests the application, the server returns and loads all necessary HTML, CSS, and JavaScript immediately. With lazy loading, the browser requests the application and the server returns only the minimum HTML, CSS, and JavaScript needed to load the application. Additional resources are downloaded as required. For example, when a user navigates a specific section of the application, both approaches are valid. The choice depends on the size, complexity, and bandwidth requirements of the application. For instance, with the bundling approach, if your application is complex and has a lot of resources, your bundles will grow quite large and take a long time to download. You could end up with a site that is slower than a traditional web application. Let's explore an example. Imagine you have a site dedicated to reviewing movies, people never know what to watch next so you decide to install a feature that randomly suggests the movie for a user. You create a web page that has a what to watch next button. You want to display a random movie name when the button is clicked. In a traditional website, when the button is clicked, the browser will send a post request to the web server. The web server returns a new web page containing the button and movie name. The web browser then renders the new page. In an SPA, when the button is clicked, the browser will send a post request to the web server. The web server will return a JSON object. The application reads the object and updates by displaying the text of the movie name. That's more efficient because the rest of the page remains as it was and it's content does not need to be sent by the server and rendered by the browser. But what if you need to update the majority of the page to display a different form of content? Well, let's explore that scenario. Suppose you are building a web application that has two pages. One page shows the latest news and the other page shows the current user's profile page. Navigation bar at the top of the site contains a link to each page. In the traditional websites, when the user clicks a profile link, the web browser sends the request to the web server. The web server generates the entire HTML page and sends it back to the web browser. The web browser then renders a new web page. In a single-page application, different pages are broken into templates, also known as views. Each view will have HTML code that can be updated by the application. For instance, the profile page would have a username, a first name, and a last name. The web browser sends the request to the web server and the web server sends back a file called a JavaScript Object Notation or JSON object. This contains only the data to be displayed, such as the user's first name and last name, and the SPA will update the HTML. This is much smaller than sending an entire web page. The web browser then updates the web page by inserting the template with items replaced by the values in the JSON object. For your next website, consider whether its complexity suits a traditional multi-page application or would perform better as an SPA. Remember that a single-page application has two methods of delivery resources. Delivering all resources immediately or delivering resources dynamically as required. If all resources are delivered when the application is loaded, the single-page application must include the views for every page on initial load. If resources are loaded dynamically, the single-page application requests the views as required and stores views in the browser for subsequent requests. Now you can compare some popular SPA websites to traditional ones and judge the performance difference for yourself.